但是本文传达的意思和table无关,嘻嘻.....

要求:选择#table1下的两个子元素tr



<table id="table1">
    <tr>
        <td>
            <table id="table2">
                <tr>行行1</tr>
                <tr>行行2</tr>
            </table>
        </td>
    </tr>
    <tr>行2</tr>
</table>



第一次测试:document.querySelector("#table1 tr"),测试发现只能选择一个tr,不符合要求;

第二次测试:document.querySelectorAll("#table1 tr"),测试选择出四个tr,不符合要求,这是由于里面包含一个table导致。执行document.querySelectorAll("#table1 tbody"),里面有两个tbody(为什么里面会有tbody,自行谷歌关键词thead,tbody,tfoot);

第三次测试:document.querySelectorAll("#table1>tbody>tr")结果符合要求;

综上所述,那么问题来了。
querySelector()通过CSS的选择器只能选单一的元素(即使里面的选择器是*,也无法选择多个元素),选多个元素需要用querySelectorAll(),这个和Jqery是不一样的,不要混淆。
#table1>tbody里面>号可以筛选以#table1为父级的子元素,不加这个则返回内部所有,所以要熟记CSS选择器啊。


代码碎片
157 声望4 粉丝

小呆码